<template>
  <div class="container-y">
      <div class="box-list">
        <div class="list">
            <p class="text-title">教材／笔记</p>
            <div class="showlist">
               <div class="list-all" v-for="(listItem,index) in list" :key="index">
                   <div class="list-item" v-for="(Item,index) in listItem.itemFreeTimes" :key="index" >
                       <router-link :to="{ path: '/ClassText' ,query:{tid:Item.id}}">
                        <div class="item-left" >
                            <div class="imgbox">
                                <img :src="listItem.wechatPortrait" alt="">
                            </div>
                            <div class="text-time">
                                <span class="name">{{listItem.teachName}}</span>
                                <p class="time">{{Item.freeDate}} {{Item.freeDate}} </p>
                            </div>
                            </div>
                        <div class="item-right">查看详情</div>
                       </router-link>
                   </div>
               </div>
            </div>
        </div>
      </div>
  </div>
</template>
<script>
export default {
    data(){
    return{
          list:"",
      }
  },
   mounted(){
    this.getINformation()
    this.get()
  },
  methods:{
      get(){
        
        this.$axios.post('https://www.chenyekeji.com/xcx/wx/getOpenId',{data:{code:"111"}})
          .then((res) => {
              console.log(res)
          })
      },
      getINformation(){
          this.$axios.post('http://www.chenyekeji.com/bsti-rbac/wechat/getOrder?userId='+this.$route.query.userId)
          .then((res) => {
              this.list=res.data.data
          })
      },
  }
}
</script>
<style scoped>
.text-time{
    display: flex;
    flex-flow: column;
}
.list-item{
    height: 150px;
    text-align: left;
    border-bottom:1px solid #ededed;
    box-sizing: border-box;
    padding:20px 0;
    font-size: 30px;
    display: flex;
}
.list-item a{
  display: block;
  display: flex;
  flex:1;
}
.item-right{
    font-size: 30px;
    color:#666666;
    padding-right: 60px;
    position: relative;
    display: flex;
    align-items: center;
}
.item-right:after{
  content: '';
  position: absolute;
  top:0;
  right: 10px;
  height: 100%;
  width:20px;
  background: url(../assets/back.png) no-repeat center center;
  background-size:13px 23px ;
}
.item-left{
    flex:1;
    display: flex;
}
.time{
    color:#aaaaaa;
    padding-left:30px;
    flex: 1;
    display: flex;
    font-size: 26px;
    align-items: center;
}
.list-one{
    padding:20px 0;
}
.name{
    font-size: 32px;
    color: #333333;
    padding-left:30px;
    flex:1;
    
}
.imgbox{
    height: 110px;
    width: 110px;
    text-align: left;
    overflow: hidden;
    border: 1px solid #fba7a7;
    border-radius: 100%;
    overflow: hidden;
}
 .imgbox img{
     min-height: 100%;
     width:100%;
 }
  .container-y{
      height: 100%;
      width:100%;
      padding:20px 20px 0 20px ;
      background: #f4f4f4;
      position: relative;
      display: flex;
      box-sizing: border-box;
  }
  .box-list{
      background: #fff;
      flex:1;
      padding:0 30px;
      border-radius: 10px;
  }
  .text-title{
      line-height: 82px;
      height: 82px;
      text-align: left;
      font-size: 28px;
      padding-left:20px;
      color: #333333;
      position: relative;
  }
  .text-title:after{
      position: absolute;
      content: "";
      left:0;
      height: 30px;
      border-radius: 4px;
      width: 8px;
      background: #ff3434;
      top:26px;
  }
</style>


